<!--公共头部-->
{template 'aitimt/common/header1'}
<style>
    .mui-table-view .mui-media, .mui-table-view .mui-media-body{line-height: 2rem;}
    .mui-slider-indicator.mui-segmented-control .mui-control-item {border-left:1px solid #c1c1c1 ;border-bottom:1px solid #c1c1c1 ;padding: 1px;color: #585858;}
    .mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{border-bottom:3px solid #e94709 ;color: #585858;}
    .top-search{position: absolute;padding-top: 15%;width: 100%;background-color: #FFFFFF;}
    .mui-input-row.mui-search .mui-icon-clear{display: none;}
    .top-search .top-input{position: absolute;width: 100%;background: white;padding-left: 5%;}
    .top-search .top-input .top-btn{position: absolute;top: 0;background: #ec6941;width: 30%;height: 65%;right: 7%;text-align: center;line-height: 2rem;font-size: 0.9375rem;border-radius: 0.4375rem;color: #FFFFFF;}
    .mui-search input[type=search] {background-color: #FFFFFF;border-radius: 0.625rem;border: #d9d9d9 solid 1px;width: 60%;}
    .mui-search .mui-placeholder{width: 60%;}
    .mui-active::before{color: #d9d9d9;}
    .mui-search .mui-placeholder span{color: #d9d9d9;font-size: 10px;}
    .mui-search .mui-placeholder .mui-icon{margin-left: -100px;color: #d9d9d9;}
    .entry-message{position: absolute;top: 15%;width: 100%;background-color: #FFFFFF;}
    .entry-message p{margin-top: 8%;color: #e94709;padding: 2% 5% 2% 5%;background-color: #eeeeee;font-size: 1rem;}
    .query-sum{margin-left: 25%;font-size: 12px;color: #000;}
    .entry-message #entry-sex{width: 350px;height:250px;background-color: #FFFFFF;}
    .entry-detail{width: 100%;height: 30px;}
    .entry-detail .entry-event{display: inline-block;padding:0 2%; height: 3rem;border-radius: 0.625rem;background: #999999;color: #FFFFFF;margin-left:5%;margin-top: 1%;font-size: 0.625rem;line-height: 2rem;text-align: center;}
    .entry-detail .entry-text{padding: 0;margin: 0;padding-left: 5%;font-size: 0.625rem;margin-top:-20px ;height: 2rem;line-height: 2rem;color: #FFFFFF;background: #999999;}
    .entry-detail .entry-text span{margin-left:5% ;}

</style>
<!-- 公共头部start -->
<header class="mui-bar mui-bar-nav">
    <a class="top-return mui-action-back"><img src="{$aideUrl}app/resource/aitimt/images/return.png" ></a>
    <a class="top-logo"><img src="{$aideUrl}app/resource/aitimt/images/logo.png" ></a>
    <!--公共菜单start -->
    {template 'aitimt/common/menu'}
    <!-- 公共菜单end-->
</header>
<!-- 公共头部end -->
<div class="top-search">
    <div class="top-input">
        <div class="mui-input-row mui-search">
            <input type="search" id="search" class="mui-input-clear" placeholder="输入手机号/证件号">
        </div>
        <div class="top-btn" onclick="submit()">搜索</div>
    </div>
</div>
<div class="entry-message">
    <div class="entry-detail" id="query-detail" style="display: none;">
    </div>
    <p>已报选手性别比例图<span class="query-sum">报名人数:<span style="color: red">{$sum}</span>人</span></p>
    <div id="entry-sex">
    </div>
    <p>已报选手星座比例图<span class="query-sum">报名人数:<span style="color: red">{$sum}</span>人</span></p>
    <div id="entry-star">
    </div>
</div>

<!-- 公共底部start -->
{template 'aitimt/common/nav'}
<!-- 公共底部end -->
<script src="{$aideUrl}app/resource/aitimt/extend/highcharts.js"></script>
<script src="{$aideUrl}app/resource/aitimt/extend/highcharts-more.js"></script>
<script src="{$aideUrl}app/resource/aitimt/extend/highcharts-zh_CN.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
    });
    $("input").focus(function(){
        $('.mui-bar-tab').css('display','none');
        $('.entry-message').css('display','none');
    });

    $("input").blur(function(){
        $('.mui-bar-tab').css('display','table');
        $('.entry-message').css('display','block');

    });
    function submit() {
        var search=document.getElementById('search').value;
        if (!search){
            util.alert("没有搜索内容");
        }else{
            var arr={search:'query',value:search,aid:{$activityid}};
            var result='';
            $.ajax({
                type: 'post',
                url: "{php echo app_url('home/index/search')}",
                data: arr,
                dataType: 'json',
                success: function(data){
                    if (data[0]==null){
                        util.alert("暂无报名信息");
                        document.getElementById('query-detail').style='display:none';
                        return false;
                    }
                    var statusmsg='';
                    switch(Number(data[0].status)){
                        case 0: statusmsg = '未支付';break;
                        case 1:	statusmsg = '待参与';break;
                        case 2:	statusmsg = '待参与';break;
                        case 3: statusmsg = '已参与';break;
                        case 5: statusmsg = '已取消';break;
                        case 7: statusmsg = '已退款';break;
                        default:break;
                    }
                   result='<div class="entry-event">3公里&nbsp;&nbsp;'+data[0].name+'</div>\n' +
                       '<p class="entry-text">\n' +
                       '<span>姓名:&nbsp;&nbsp;'+data[0].realname+'</span>\n' +
                       '<span>状态:&nbsp;&nbsp;'+statusmsg+'</span>\n' +
                       '<span>报名时间:&nbsp;&nbsp;'+data[0].jointime+'</span>\n' +
                       '</p>' ;
                    document.getElementById('query-detail').innerHTML=result;
                    document.getElementById('query-detail').style='display:block';
                },
                error: function(xhr, type){
                    // alert('加载失败，请刷新下重试!');
                    // 即使加载出错，也得重置
                    console.log('加载失败')
                }
            });
        }
    }
    var man=50;
    var woman=50;
    var arrWen={$arrCon};
    var arrNum=[0,0,0,0,0,0,0,0,0,0,0,0];
    {if !empty($arrGender[0])}
    man={$arrGender[0]};
    woman={$arrGender[1]};
    {/if}
        {if !empty($arrWen) }
        arrWen={$arrWen};
        arrNum={$arrNum};
        {/if}
    var chart = Highcharts.chart('entry-sex', {
        colors: ['#e83828','#f39800',],
        credits: {
            enabled: false
        },
        chart: {
            heigh:500,
            spacing : [-20, 0 , 0, 0],
        },
        title: {
            floating:true,
            text: '报名选手男女比例',
            style:{
                fontSize:'10px',
            }
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                },
                point: {
                    events: {
                        mouseOver: function(e) {  // 鼠标滑过时动态更新标题
                            // 标题更新函数，API 地址：https://api.hcharts.cn/highcharts#Chart.setTitle
                            chart.setTitle({
                                text: e.target.name+ '\t'+ e.target.y + ' %'
                            });
                        }
                    }
                },
            }
        },
        series: [{
            type: 'pie',
            innerSize: '60%',
            name: '性别比例图',
            //数据比例
            data: [
                ['男性',man],
                ['女性',  woman],
            ]
        }]
    }, function(c) { // 图表初始化完毕后的会掉函数
        // 环形图圆心
        var centerY = c.series[0].center[1],
            titleHeight = parseInt(c.title.styles.fontSize);
        // 动态设置标题位置
        c.setTitle({
            y:centerY + titleHeight/2
        });
    });

    // 星座图设置
    var chart1 = Highcharts.chart('entry-star', {
        colors: ['#e83828'],
        chart: {
            polar: true,
        },
        title:{
            text:null,
        },
        pane: {
            size: '70%'
        },
        xAxis: {
            categories: arrWen,
            tickmarkPlacement: 'on',
            lineWidth: 0,
            gridLineColor:'#f49f11'
        },
        yAxis: {
            gridLineInterpolation: 'polygon',
            lineWidth: 0,
            min: 0,
            gridLineColor:'#f49f11'
        },
        tooltip: {
            shared: true,
            pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.0f}</b><br/>'
        },
        legend: {
            // align: 'right',
            // verticalAlign: 'top',
            // y: 70,
            // layout: 'vertical'
        },
        series: [{
            name: '人数',
            data: arrNum,
            type:'line',
            pointPlacement: 'on',
        }]
    });
</script>

</body>

</html>
